﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<title></title>
<!--Load the AJAX API--> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
// Load the Visualization API and the piechart package. 
google.load('visualization', '1', {'packages':['piechart']}); 
// Set a callback to run when the API is loaded. 
google.setOnLoadCallback(sendRequest); 
// Callback that creates and populates a data table, 
// instantiates the pie chart, passes in the data and 
// draws it. 
function sendRequest()
{
    var query = new google.visualization.Query('http://202.121.63.14/myservices/moodleservice.svc/ajaxEndPoint/GetActivityCountByCourse?courseid=0');
    query.send(handleQueryResponse);
}
function handleQueryResponse(response)
{
    if (response.isError()){
        alert(response.getMessage());
        return;
    }
    
    var data=response.getDataTable();
    var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
    chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'}); 
}
</script> 
</head> 
<body>
 <!--Div that will hold the pie chart--> 
 <div id="chart_div">
 </div>
  </body> 
  </html>